<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: 70481
  Date: 2019/9/12
  Time: 18:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="myTable" lay-filter="myTable"></table>
</body>


<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

<script type="text/javascript">
    // 加载模块
    layui.use(["table","form","layer"],function () {
        var table= layui.table;
        var form = layui.form;
        var layer = layui.layer;

        // 初始化表格
        table.render({
            elem:"#myTable",
            url:"${pageContext.request.contextPath}/user/selectUserPage",
            page:"true",
            toolbar:"#search",
            cols:[[
                {checkbox:'checkbox'},
                {title:"编号",field:"userId",width:65},
                {title:"电话",field:"userTelphone"},
                {title:"用户头像",field:"userImage"},
                {title:"法号",field:"userNickname",width:65},
                {title:"账号",field:"userName",width:80},
                {title:"分组",field:"userAutograph",width:65},
                {title:"所在省",field:"userProvince",width:65},
                {title:"所在市",field:"userCity"},
                {title:"状态",field:"userStatus",templet: '#titleTpl',width:90},
                {title:"注册时间",field:"userCreatDate"},
                {title:"是否冻结用户",templet: '#os'}
            ]]
        })

        // 开关监听
        form.on("switch(switchTest)",function (data) {
            // alert(123)
            var userStatus = data.value;
            // alert(userStatus)
            // 获取当前点击的name的值

            var chec = data.elem;
            var userId  = $(chec).prop("name")
            // alert(userId)

            // 发送ajax请求修改数据

            $.ajax({
                url:"${pageContext.request.contextPath}/user/userUpdate",
                data:{"userId":userId,"userStatus":userStatus},
                success:function (data) {
                    layer.msg(data.isUpdate,{time:1250})
                    // 刷新表格
                    table.reload("myTable")
                }
            })
        })


    })



function search() {
    // 获取搜索框中的内容
    var params = $("#userName").val();
    // alert(params)

    // 发送重写加载表格
    var table = layui.table;
    table.reload("myTable",{
        where:{"name":params}
    })
}

</script>

<script type="text/html" id="search">
    <input type="text" name="userName" id="userName" style="height: 30px" >
    <button type="button" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="add" onclick="search()">
        <i class="layui-icon layui-icon-search"></i>搜索</button>
</script>

<script type="text/html" id="os">

    {{#  if(d.userStatus == 1){ }}
            <input type="checkbox" value="2" checked name="{{d.userId}}"  lay-filter="switchTest" lay-skin="switch" lay-text="冻结用户|解封用户">
    {{#  } else if(d.userStatus == 0){ }}
            未激活
    {{#  } else { }}
            <input type="checkbox" value="1" name="{{d.userId}}" lay-filter="switchTest" lay-skin="switch" lay-text="冻结用户|解封用户">
    {{#  } }}

</script>

<script type="text/html" id="titleTpl">
    {{#  if(d.userStatus == 1){ }}
    正常用户
    {{#  } else if(d.userStatus == 0){ }}
    未激活
    {{#  } else { }}
   <span style="color: red"> 非法用户</span>
    {{#  } }}
</script>
</html>
